<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>光山县旅游产业监控中心</title>
    <link rel="stylesheet" href="./assets/css/public.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <link rel="stylesheet" href="./assets/css/tongji.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
</head>
<body>
    <div class="box">
        <!--头部-->
        <div class="title-box">
            <div class="title-img">
                <h3>光山县旅游产业监控中心</h3>
            </div>
            <ul class="link-box">
                <li><a href="index.html">人流热力图</a></li>
                <li class="active"><a href="chanye_jq.html">行业运行监测</a></li>
                <li><a href="industryDevelopment.html">行业发展监测</a></li>
                <li><a href="video.html">第三方数据</a></li>
            </ul>
            <div class="title-left">
                <span>光山县</span>
                <span id="weather">小雨转晴</span>
                <span id="temperature">32/23℃</span>
                <span id="windPower">东风</span>
            </div>
        </div>
        <!--主体-->
        <div class="main-box">
            <!--导航-->
            <div class="nav-box">
                <ul>
                    <li>
                        <a href="./index.html">
                            <div>
                                <img src="./assets/images/icon-index.png">
                                <img src="./assets/images/icon-index-active.png">
                            </div>
                            <p>旅游发展环境</p>
                        </a>
                    </li>
                    <li>
                        <a href="./chanye_jq.html">
                            <div>
                                <img src="./assets/images/icon-analysis.png">
                                <img src="./assets/images/icon-analysis-active.png">
                            </div>
                            <p>旅游产业监测</p>
                        </a>
                    </li>
                    <li class="active">
                        <a href="./tongji.html">
                            <div>
                                <img src="./assets/images/icon-operation.png">
                                <img src="./assets/images/icon-operation-active.png">
                            </div>
                            <p>旅游统计监测</p>
                        </a>
                    </li>
                    <li>
                        <a href="./lvyoujia_qx.html">
                            <div>
                                <img src="./assets/images/icon-activity.png">
                                <img src="./assets/images/icon-activity-active.png">
                            </div>
                            <p>旅游+</p>
                        </a>
                    </li>
                </ul>
            </div>
            <!--数据内容-->
            <div class="content-box flex-column">
                <div class="tourist-data content-center-bg">
                    <div>
                       <span>实时客流量(人次)</span>
                        <p class="numberStyle">550</p>
                    </div>
                    <div>
                        <span>日累计客流量(人次)</span>
                        <p class="numberStyle">14001</p>
                    </div>
                    <div>
                        <span>月累计客流量(人次)</span>
                        <p class="numberStyle">457071</p>
                    </div>
                </div>
                <div class="content-main flex flex1">
                    <div class=" bg-1 flex1 mgb-16 ">
                        <div class="content-title flex-w">分时段客流接待</div>
                        <div class="bg-main-1" id="flow-1"></div>
                    </div>
                    <div class=" bg-1 flex1 mgb-16 mgl-16">
                        <div class="content-title flex-w">月度客流环比增长分析</div>
                        <div class="bg-main-1" >
                            <div class="input-box">
                                <input type="text" readonly id="months" class="input-text " placeholder="选择月份">
                                <button>查询</button>
                            </div>
                            <div id="flow-2" class="flex1"></div>
                        </div>
                    </div>
                    <div class=" bg-1 flex1 mgb-16 mgl-16">
                        <div class="content-title flex-w">
                            <span>年度客流环比增长分析</span>
                        </div>
                        <div class="bg-main-1" >
                            <div class="input-box">
                                <input type="text" readonly id="years" class="input-text " placeholder="选择年份">
                                <button>查询</button>
                            </div>
                            <div id="flow-3" class="flex1"></div>
                        </div>
                    </div>
                </div>
                <div class="content-main flex flex1">
                    <div class=" bg-1 flex2">
                        <div class="content-title flex-w">假日分析</div>
                        <div class="bg-main-1" id="flow-4"></div>

                    </div>
                    <div class=" bg-1 flex1 mgl-16">
                        <div class="content-title flex-w">入境客流分析</div>
                        <div class="bg-main-1" >
                            <div class="input-box">
                                <input type="text" readonly id="yearsEntry" class="input-text " placeholder="选择年份">
                                <button>查询</button>
                            </div>
                            <div class="flex1" id="flow-5"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./assets/plugin/jquery.min.js"></script>
<script src="./assets/plugin/ECharts/echarts.js"></script>
<script src="./assets/plugin/ECharts/china.js"></script>
<script src="./assets/plugin/laydate/laydate.js"></script>
<script src="./assets/plugin/jquery.leoTextAnimate.js"></script>
<script src="./assets/plugin/laydate/laydate.js"></script>
<script src="./assets/js/public.js"></script>
<script src="./assets/js/tongji.js"></script>
<script>
    $(document).ready(function () {
        laydate.render({
            elem: '#years'
            , theme: '#37B866'
            , type: 'year'
        });
        laydate.render({
            elem: '#months'
            , theme: '#37B866'
            , type: 'month'
        });
        laydate.render({
            elem: '#yearsEntry'
            , theme: '#37B866'
            , type: 'year'
        });
        // 分时段客流接待
        var hourData = [15, 14,52,125,120,93,100,105,74,17,18]
        var hourDate = ['8点', "9点",'10点','11点','12点','13点','14点','15点','16点','17点','18点']
        myChart2('flow-1',hourData,hourDate)
        //月度客流环比增长分析
        var monthDate = ['2018年3月', `2019年4月`, `2020年4月`]
        var monthData= [12,124,12]
        myChart2('flow-2',monthData   ,monthDate)
        //年度客流环比增长分析
        var yearDate = ['2018年', `2019年`, `2020年`]
        var yearData= [12,124,12]
        myChart2('flow-3',yearData   ,yearDate)
        //假日分析
        var holidayData = [
            {name:'春节',value:102}, {name:'清明',value:12}, {name:'劳动',value:112}, {name:'端午',value:29}, {name:'中秋',value:120},{name:'国庆',value:201},
        ]
        myChart4('flow-4',holidayData)
        //    入境客流分析
        var entryData = [2019,2020]
        var entryDate = [2020,2019]
        myChart2('flow-5',entryData,entryDate)
    })
</script>
</html>
